<template>
	<view class="container">
		<!-- 顶部分类Tab -->
		<view class="tabs">
			<view v-for="(tab, idx) in tabs" :key="idx" :class="['tab', currentTab === idx ? 'active' : '']"
				@click="switchTab(idx)">
				{{ tab }}
			</view>
		</view>

		<!-- 卡片列表 -->
		<view class="card-list">
			<view class="card" v-for="(item, idx) in showList" :key="item.id" @click="goToDetail(item)">
				<swiper v-if="item.licenseImgs && item.licenseImgs.length" class="card-img-swiper"
					:indicator-dots="item.licenseImgs.length > 1" :autoplay="item.licenseImgs.length > 1" :interval="3000"
					:circular="true">
					<swiper-item v-for="(img, imgIdx) in item.licenseImgs" :key="imgIdx">
						<view class="img-wrapper">
							<image :src="img.url || img" mode="aspectFit" class="card-img" />
						</view>
					</swiper-item>
				</swiper>
				<view v-else class="img-wrapper">
					<image src="" mode="aspectFit" class="card-img" />
				</view>
				<view class="card-content">
					<view class="card-title">{{ item.title }}</view>
					<view class="card-desc">{{ item.prospect }}</view>
					<view class="card-footer">
						<view class="footer-row">
							<text class="price">注册资本：</text>
							<text class="footer-value">{{ item.capital }}</text>
						</view>
						<view class="footer-row">
							<text class="tag-label">公司：</text>
							<text class="tag">{{ item.company }}</text>
						</view>
					</view>
				</view>
				<!-- 移除 card-actions 按钮区域 -->
			</view>
		</view>

		<view v-if="!showList.length" style="text-align:center;color:#aaa;margin-top:60rpx;">暂无项目，点击右下角发布</view>

		<!-- 下拉加载更多 -->
		<view v-if="hasMore" class="load-more">下拉加载更多...</view>

		<!-- 右下发布按钮 -->
		<button class="fab" @click="goToPublish">
			<view class="fab-icon">+</view>
		</button>
	</view>
</template>

<script>
	import cfg from '@/common/config.js'
	import api from '@/common/api/index.js'
	const PAGE_SIZE = 6;
	export default {
		data() {
			return {
				tabs: ['全部'],
				currentTab: 0,
				allList: [], // 全部项目
				showList: [], // 当前页展示
				page: 1,
				hasMore: true
			}
		},
		onShow() {
			this.page = 1;
			this.showList = [];
			this.hasMore = true;
			this.loadPage();
		},
		methods: {
			loadPage() {
				api.req(`/station/idle-publish/page?pageNo=${this.page}&pageSize=${PAGE_SIZE}`, {}, 'GET', 'JSON', false)
					.then(res => {
						if (res.code === 0 && res.data && res.data.list) {
							const list = res.data.list.map(item => {
								// 图片字段直接为数组
								item.licenseImgs = Array.isArray(item.licenseImgs) ? item.licenseImgs : [];
								item.idcardImgs = Array.isArray(item.idcardImgs) ? item.idcardImgs : [];
								return item;
							});
							if (this.page === 1) {
								this.showList = list;
							} else {
								this.showList = this.showList.concat(list);
							}
							this.hasMore = res.data.total > this.showList.length;
						}
					});
			},
			onReachBottom() {
				if (this.hasMore) {
					this.page++;
					this.loadPage();
				}
			},
			switchTab(idx) {
				this.currentTab = idx;
				this.page = 1;
				this.showList = [];
				this.hasMore = true;
				this.loadPage();
			},
			goToPublish() {
				uni.navigateTo({ url: '/subPackage3/publish' });
			},
			goToDetail(item) {
				uni.navigateTo({
					url: `/subPackage3/detail?id=${item.id}`
				});
			},
			goToEdit(item) {
				uni.navigateTo({
					url: `/subPackage3/publish?id=${item.id}`
				});
			},
			// 删除功能如有接口可补充，否则隐藏按钮
		}
	}
</script>

<style scoped>
	.container {
		background: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 80px;
	}

	.tabs {
		display: flex;
		background: #fff;
		border-bottom: 1px solid #eee;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 18rpx 0;
		font-size: 30rpx;
		color: #666;
		border-bottom: 2px solid transparent;
	}

	.tab.active {
		color: #5677fc;
		font-weight: bold;
		border-bottom: 2px solid #5677fc;
	}

	.card-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx 10rpx 0 10rpx;
	}

	.card {
		width: 97%;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: 16rpx;
	}

	.card-img-swiper,
	.img-wrapper {
		width: 100%;
		height: 240rpx;
		min-height: 240rpx;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}

	.card-content {
		padding: 16rpx 16rpx 0 16rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 8rpx;
		white-space: normal;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.card-desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
		white-space: normal;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.card-footer {
		margin-bottom: 8rpx;
	}

	.footer-row {
		display: flex;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.price {
		color: #f74d54;
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 8rpx;
	}

	.footer-value {
		color: #333;
		font-size: 26rpx;
	}

	.tag-label {
		color: #5677fc;
		font-size: 24rpx;
		margin-right: 4rpx;
	}

	.tag {
		color: #5677fc;
		font-size: 24rpx;
		border: 1px solid #5677fc;
		border-radius: 20rpx;
		padding: 2rpx 12rpx;
		background: #f7faff;
	}

	.card-actions {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		margin: 8rpx 16rpx 0 16rpx;
	}

	.detail-btn,
	.edit-btn,
	.delete-btn {
		font-size: 24rpx;
		padding: 6rpx 18rpx;
		border-radius: 8rpx;
		border: none;
		margin-top: 8rpx;
	}

	.detail-btn {
		background: #e3e8f0;
		color: #5677fc;
	}

	.edit-btn {
		background: #fffbe6;
		color: #faad14;
	}

	.delete-btn {
		background: #fff1f0;
		color: #f74d54;
	}

	.load-more {
		text-align: center;
		color: #aaa;
		margin: 30rpx 0 0 0;
	}

	.fab {
		position: fixed;
		right: 40rpx;
		bottom: 60rpx;
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #5677fc 0%, #6ddaa3 100%);
		color: #fff;
		font-size: 36rpx;
		border-radius: 50%;
		box-shadow: 0 8rpx 32rpx rgba(86, 119, 252, 0.18);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
		border: none;
		transition: box-shadow 0.2s, transform 0.2s;
		animation: fab-float 2s infinite ease-in-out;
		padding: 0;
	}

	.fab:active {
		box-shadow: 0 2rpx 8rpx rgba(86, 119, 252, 0.10);
		transform: scale(0.96);
	}

	@keyframes fab-float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}
	}

	.fab-icon {
		font-size: 64rpx;
		font-weight: bold;
		line-height: 1;
		color: #fff;
		text-shadow: 0 2rpx 8rpx rgba(86, 119, 252, 0.18);
		pointer-events: none;
	}
</style>